/* ------------------------------------------Navbar-------------------------------------- */
            
            * {
                box-sizing: border-box;
                margin: 0px;
                padding: 0px;
            }
            
            nav {
                color: rgb(255, 255, 255);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 1.8rem 0 0 0;
                padding-bottom: 3rem;
            }
            
            nav .mainMenu {
                display: flex;
                list-style: none;
            }
            /* nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-size: 18px;
    transition: 0.2s ease;
}

nav .mainMenu li a:hover {
    background: #45bf92;
} */
            
            nav .mainMenu li a {
                display: inline-block;
                margin: 1rem -.25rem 0;
                padding: 0 25px;
                text-decoration: none;
                color: #f5f3ea;
                font-size: 20px;
            }
            
            nav .mainMenu li a:hover {
                color: teal;
                transition: 0.2s ease-in-out;
            }
            
            nav .mainMenu li a:active {
                color: orange;
                transition: 0.4s ease-in-out;
            }
            
            nav .openMenu {
                font-size: 2rem;
                margin: 20px;
                display: none;
                cursor: pointer;
            }
            
            nav .mainMenu .closeMenu,
            .icons i {
                font-size: 2rem;
                display: none;
                cursor: pointer;
            }
            
            .fa-bars:hover {
                color: teal;
                transition: .2s ease-in-out;
            }
            
            .fa-times:hover {
                color: teal;
                transition: .2s ease-in-out;
            }
            
            .fa-github:hover {
                color: teal;
                transition: .2s ease-in-out;
            }
            
            .fa-envelope:hover {
                color: teal;
                transition: .2s ease-in-out;
            }
            
            .fa-whatsapp:hover {
                color: teal;
                transition: .2s ease-in-out;
            }
            
            nav .logo {
                margin: 6px;
                cursor: pointer;
                text-transform: uppercase;
                width: 8rem;
            }
            
            nav .logo:hover {
                transform: scale(1.2);
                transition: .15s ease-in-out;
            }
            
            .fa:active {
                color: teal;
                transition: .4s ease-in-out;
            }
            
            .fab:active {
                color: teal;
                transition: .4s ease-in-out;
            }
            /* ------------------------------------------Queries Start-------------------------------------- */
            
            @media (max-width: 765px) {
                .wipe {
                    display: none;
                }
            }
            
            @media (max-width: 800px) {
                body {
                    overflow-x: hidden;
                }
                nav .mainMenu {
                    height: 100vh;
                    position: fixed;
                    top: 0px;
                    right: 0px;
                    left: 0px;
                    z-index: 10;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background: #181818;
                    transition: top 1s ease 0s;
                    display: none;
                }
                nav .mainMenu li a {
                    font-size: 2rem;
                    padding: 0.3rem 0;
                }
                nav .mainMenu .closeMenu {
                    display: block;
                    position: absolute;
                    top: 20px;
                    right: 20px;
                }
                nav .openMenu {
                    display: block;
                }
                nav .mainMenu li a:hover {
                    background: none;
                    color: teal;
                    transition: 0.1s ease-in-out;
                }
                .icons i {
                    margin-top: 2rem;
                    display: inline-block;
                    padding: 12px;
                    font-size: 40px;
                    color: #fff;
                }
                .center-small {
                    text-align: center;
                }
                .container {
                    max-width: 95%;
                }
                .project-title {
                    font-size: 1.2rem;
                    padding: 0;
                    text-align: right;
                    /* display: none; */
                }
            }
            /* ------------------------------------------Queries End-------------------------------------- */
            /* scrollbar */
            
             ::-webkit-scrollbar {
                width: 8px;
            }
            
             ::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
            
             ::-webkit-scrollbar-thumb {
                background: teal;
            }
            
             ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
            /* colors */
            
            .white:hover {
                color: rgb(197, 197, 197);
                transition: 0.1s ease-in-out;
            }
            
            .teal {
                color: #45bf92;
            }
            
            .teal:hover {
                color: #25644d;
                transition: 0.1s ease-in-out;
            }
            
            .purple {
                color: SlateBlue;
            }
            
            .purple:hover {
                color: darkSlateBlue;
                transition: 0.1s ease-in-out;
            }
            
            .blue {
                color: dodgerblue;
            }
            
            .blue:hover {
                color: rgb(23, 97, 172);
                transition: 0.1s ease-in-out;
            }
            
            .orange {
                color: orange;
                transition: 0.1s ease-in-out;
            }
            
            .orange:hover {
                color: orangered;
                transition: 0.1s ease-in-out;
            }
            /* ------------------------------------------Index Start-------------------------------------- */
            
            .webgl {
                /* mix-blend-mode: exclusion; */
                outline: none;
                position: absolute;
                top: 0;
                margin: 0 auto;
                z-index: -1;
                opacity: 0.6;
            }
            
            .canvas {
                max-width: 90vw;
            }
            
            .gif {
                margin: 5rem auto;
                width: clamp(50px, 10vw, 100px);
                text-align: center;
                display: block;
            }
            
            body {
                background-color: #1d1e26;
                background-image: linear-gradient(180deg, #181818 0%, #1d1e26 55%);
                /* background-image: linear-gradient(1800deg, #000000 0%, #1d2025 74%); */
                /* background-image: linear-gradient(315deg, #141e30 0%, #1d2025 74%); */
                color: #f5f3ea;
                background-attachment: fixed;
            }
            
            h1 {
                /* font-family: 'Playfair Display', serif; */
                font-family: "Montserrat", sans-serif;
                color: white;
                font-style: italic;
                font-weight: 800;
                text-align: center;
                font-size: clamp(7rem, 15vw, 16rem);
                margin-top: clamp(10rem, 18vw, 16rem);
                /* mix-blend-mode: exclusion; */
            }
            
            h2 {
                font-family: 'Playfair Display', serif;
                font-style: italic;
                font-weight: thin;
                text-align: center;
                font-size: clamp(8rem, 15vw, 10rem);
                /* mix-blend-mode: exclusion; */
                letter-spacing: 0.01em;
            }
            
            h3 {
                font-size: 2.5em;
                font-weight: bold;
                padding: 0.5rem 0;
            }
            
            h4 {
                color: white;
            }
            
            h4:hover {
                color: white;
            }
            
            h3,
            p,
            a {
                font-family: "Montserrat", sans-serif;
                color: #f5f3ea;
            }
            
            p {
                font-size: 16px;
                letter-spacing: 0.01em;
            }
            
            .header {
                position: relative;
                /* margin-top: -6rem; */
                margin-top: clamp(-15rem, 5vw, 22rem);
            }
            
            .subheader {
                font-weight: lighter;
                font-size: clamp(1rem, 40vw, 3rem);
            }
            
            .top-box {
                max-width: 50rem;
                margin: 0 auto;
            }
            
            .mid-box {
                max-width: 30rem;
                margin: 0 auto;
            }
            
            .bot-box {
                max-width: 30rem;
                margin: 0 auto;
            }
            
            ul li {
                margin: 0;
                padding: 0.1em;
            }
            /* ------------------------------------------Navbar-------------------------------------- */
            
            .footer-dark {
                border-top: 0.1px solid grey;
                padding: 50px 0;
                color: #f0f9ff;
                /* background-color: #282d32; #181818 0%, #1d1e26 */
                /* background-color: #181818; */
                /* background-image: linear-gradient(170deg, #181818 0%, #1e1f20 75%); */
                /* background-image: linear-gradient(180deg, #181818 0%, #1d1e26 75%); */
                background-color: #1d1e26;
                background-image: linear-gradient(0deg, #181818 0%, #1d1e26 65%);
                width: 100%;
                position: absolute;
            }
            
            .footer-dark h3 {
                margin-top: 0;
                margin-bottom: 12px;
                font-weight: bold;
                font-size: 16px;
            }
            
            .footer-dark ul {
                padding: 0;
                list-style: none;
                line-height: 1.6;
                font-size: 14px;
                margin-bottom: 0;
            }
            
            .footer-dark ul a {
                color: inherit;
                text-decoration: none;
                opacity: 0.6;
            }
            
            .footer-dark ul a:hover {
                opacity: 0.8;
            }
            
            @media (max-width:767px) {
                .footer-dark .item:not(.social) {
                    text-align: center;
                    padding-bottom: 20px;
                }
            }
            
            .footer-dark .item.text {
                margin-bottom: 36px;
            }
            
            @media (max-width:767px) {
                .footer-dark .item.text {
                    margin-bottom: 0;
                }
            }
            
            .footer-dark .item.text p {
                opacity: 0.6;
                margin-bottom: 0;
            }
            
            .footer-dark .item.social {
                text-align: center;
                margin: 3rem 0;
            }
            
            @media (max-width:991px) {
                .footer-dark .item.social {
                    text-align: center;
                    margin-top: 20px;
                }
            }
            
            .footer-dark .item.social>a {
                font-size: 40px;
                width: 64px;
                height: 64px;
                line-height: 36px;
                display: inline-block;
                text-align: center;
                margin: 0 8px;
                color: #fff;
                opacity: 0.75;
            }
            
            .footer-dark .item.social>a:hover {
                opacity: 0.9;
            }
            
            .footer-dark .copyright {
                text-align: center;
                padding-top: 24px;
                opacity: 0.3;
                font-size: 16px;
                margin-bottom: 0;
            }
            /* hr {
                max-width: 60%;
                margin: 3rem auto;
                color: white;
                z-index: 10;
                height: 2px;
            } */
            /* works */
            
            .works-text {
                max-width: 25rem;
                margin-top: 6rem;
            }
            
            .works-header {
                font-size: 7rem;
                text-align: left;
            }
            
            @media screen and (min-width: 540px) and (max-width: 1090px) {
                /* STYLES HERE */
            }
            /******************************************************** projects ***********************************************/
            /* hover elements */
            
            .hover {
                overflow: hidden;
                position: relative;
                padding-bottom: 60%;
            }
            
            .hover-overlay {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 90;
                transition: all 0.4s;
            }
            
            .hover img {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: all 0.3s;
            }
            
            .hover-content {
                position: relative;
                z-index: 99;
            }
            /* DEMO 4 ============================== */
            
            .hover-4 img {
                width: 110%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            
            .hover-4 .hover-overlay {
                background: rgba(0, 0, 0, 0.4);
                z-index: 90;
            }
            
            .hover-4-title {
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 3rem;
                z-index: 99;
            }
            
            .hover-4-description {
                position: absolute;
                top: 2rem;
                right: 2rem;
                text-align: right;
                border-right: 3px solid #fff;
                padding: 0 1rem;
                z-index: 99;
                transform: translateX(-1.5rem);
                opacity: 0;
                transition: all 0.3s;
            }
            
            @media (min-width: 992px) {
                .hover-4-description {
                    width: 50%;
                }
            }
            
            .hover-4:hover img {
                width: 100%;
            }
            
            .hover-4:hover::after {
                opacity: 1;
                transform: none;
            }
            
            .hover-4:hover .hover-4-description {
                opacity: 1;
                transform: none;
                -webkit-transform: scale(1.08);
                transform: scale(1.08);
            }
            
            .hover-4:hover .hover-overlay {
                background: rgba(0, 0, 0, 0.8);
            }
            /* -----------------------------------about--------------------------------- */
            
            .horizontal-list {
                list-style: none;
                font-size: 1rem;
            }
            
            ul.horizontal-list li {
                display: inline-block;
                min-width: 5rem;
            }
            
            .skills {
                text-align: center;
                margin: -1rem auto 1rem;
            }
            
            .skills ul li {
                margin: 4rem 2rem 2rem;
            }
            
            .illustrator:hover {
                color: orangered;
                transition: 0.2s ease-in-out;
            }
            
            .photoshop:hover {
                color: dodgerblue;
                transition: 0.2s ease-in-out;
            }
            
            .html:hover {
                color: orangered;
                transition: 0.2s ease-in-out;
            }
            
            .css:hover {
                color: skyblue;
                transition: 0.2s ease-in-out;
            }
            
            .javascript:hover {
                color: yellow;
                transition: 0.2s ease-in-out;
            }
            
            .xd:hover {
                color: magenta;
                transition: 0.2s ease-in-out;
            }
            
            .figma:hover {
                color: lightcoral;
                transition: 0.2s ease-in-out;
            }
            
            .about-box {
                border: 0.5px solid white;
                border-radius: 1rem;
                padding: 2rem 0 0;
            }
            /* contacts */
            
            input[type=text],
            select {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }
            
            textarea {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }
            
            input {
                width: 100%;
            }
            
            textarea {
                width: 100%;
            }
            
            .contact-form {
                margin-top: 8rem;
            }
            /* projects */
            
            .images img {
                margin: 1rem 0;
                border-radius: 0.3rem;
            }